<template>
  <div>
    <div style="padding: 50px 100px">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
        <el-step title="步骤 4"></el-step>
      </el-steps>
    </div>
    <!-- 步骤1 -->
    <div class="buzhou" v-if="active == 1" style="">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="商品名称">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="form.stock"></el-input>
        </el-form-item>
        <el-form-item label="预售票价格">
          <el-input placeholder="请输入" v-model="form.sellPrice"></el-input>
        </el-form-item>
        <el-form-item label="现场票价格">
          <el-input v-model="form.sitePrice"></el-input>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="form.grade"></el-input>
        </el-form-item>
        <el-form-item label="分类选择">
          <div class="grid-content bg-purple">
            &nbsp; &nbsp;
            <el-select
              @change="test3"
              v-model="form.categoryId"
              placeholder="请选择分类"
            >
              <el-option
                v-for="(item, index) in categoryList"
                :key="index"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="toList">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤2 -->

    <div v-if="active == 2" style="padding: 50px 420px">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="地区选择">
          <div class="grid-content bg-purple">
            <span class="grid">省</span>
            &nbsp; &nbsp;
            <el-select
              @change="test"
              v-model="form.code"
              placeholder="请选择状态"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            &nbsp;&nbsp;
            <div class="grid-content bg-purple">
              <span class="grid">市</span>
              &nbsp; &nbsp;
              <el-select
                @change="test2"
                v-model="form.cityId"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="(item, index) in selectCityList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="form.address"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.skuImg" :src="form.skuImg" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="back">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤3-->
    <div v-if="active == 3" style="padding: 50px 420px">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="嘉宾名称">
          <el-input
            v-model="guestName"
            placeholder="请输入嘉宾名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :action="upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess02"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="img" :src="img" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="saveParams">保存参数</el-button>

          <el-button type="primary" @click="save1">下一步</el-button>
          <el-button @click="back">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 步骤4 -->

    <div v-if="active == 4" style="padding: 50px 420px">
      <!--  商品添加 -->
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="场馆设施">

          <el-select v-model="form.venueId" placeholder="请选择">
            <el-option
              v-for="item in venueList"
              :key="item.value"
              :label="item.dictName"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交通方式">

          <el-select v-model="form.trafficId" placeholder="请选择">
            <el-option
              v-for="item in trafficList"
              :key="item.value"
              :label="item.dictName"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台热度">
          <el-select v-model="form.platformId" placeholder="请选择">
            <el-option
              v-for="item in platformList"
              :key="item.value"
              :label="item.dictName"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="延期历史">

          <el-select v-model="form.delayId" placeholder="请选择">
            <el-option
              v-for="item in delayList"
              :key="item.value"
              :label="item.dictName"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="block">
            <span class="demonstration" style="color: 606266; font-weight: 500"
            >截止日期</span
            >
            <el-date-picker
              v-model="form.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="editProduct">立即修改</el-button>
          <el-button @click="back">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {listCity} from "@/api/dict";
  import {listParams, listProvinces} from "@/api/dict";

  import {selectAllCategories} from "@/api/category";
  import {insertProduct} from "@/api/product";
  import {getProduct} from "@/api/product";
  import {updateProduct} from "@/api/product";
  import Global from "../../../../public/js/Golbal"

  export default {
    data() {
      return {
        upload: Global.baseUrl,
        productId: this.$route.query.productId,
        guestName: '',
        img: '',
        form: {
          productId: 0,
          productName: "",
          categoryId: 0,
          sellPrice: 0, // 预售票价格
          sitePrice: 0, // 现场票价格
          stock: 0,
          provinceId: 0,
          cityId: 0,
          skuImg: "",
          address: "",
          date: [],
          code: '',
          code1: 120000,
          test: "",
          grade: 0,
          guestList: [],
          img: ''
        },
        code1: '130000',
        categoryList: [],
        active: 1,
        provinceList: [],
        cityList: [],
        selectCityList: [], // 筛选
        params: {
          pageNum: 1,
          limit: 6,
          code: "",
        },
        delayList: [],
        platformList: [],
        trafficList: [],
        venueList: []
      };
    },
    methods: {


      saveParams() {

        var img = this.img;
        var guestName = this.guestName;
        if (!img || !guestName) {
          this.$message.error('保存参数失败')
          return
        }
        this.form.guestList.push({
          img: img,
          guestName: guestName
        })
        this.img = ''
        this.guestName = ''
        this.$message.success('保存参数成功')

      },
      getParams() {
        listParams().then(res => {
          listParams().then(res => {
            console.log(res)
            this.venueList = res.data.venueList
            this.platformList = res.data.platformList
            this.trafficList = res.data.trafficList
            this.delayList = res.data.delayList
          })
        })
      },
      editProduct() {
        console.log(this.productId);
        updateProduct(this.form, this.productId).then((res) => {
          this.$message.success("修改成功");
          this.$router.push("/product/list");
        });
      },
      getProduct() {
        let productId = this.$route.query.productId;
        this.form.productId = this.$route.query.productId;

        getProduct(productId)
          .then((res) => {
            this.$nextTick(() => {
              let provinceList = this.provinceList;

              let arr = new Array();
              arr.push(res.data.startTime);
              arr.push(res.data.endTime);
              this.form.date = arr;
            });
            this.form = res.data;
            this.form.guestList = []
            this.form.cityId = res.data.cityId + ""
            this.form.code = res.data.provinceId + ""
            let cityList = this.cityList;

            // 进行市 的数据回显
            this.$nextTick(() => {
              for (let i = 0; i < cityList.length; i++) {
                if (cityList[i].code == res.data.cityId) {
                  this.selectCityList.push(cityList[i]);
                }
              }

            })

          })
          .catch((reason) => {
          });
      },
      toList() {
        this.$router.push("/product/list");
      },
      back() {
        this.active--;
      },
      saveProduct() {
        insertProduct(this.form)
          .then((res) => {
            this.$message.success("添加成功");
            this.$router.push("/product/list");
          })
          .catch((reason) => {
          });
      },
      test3(val) {
        this.form.categoryId = val;
      },
      getCategoryList() {
        selectAllCategories().then((res) => {
          this.categoryList = res.data;
        });
      },
      save1() {
        if (this.active++ > 3) this.active = 0;
      },
      onSubmit() {
        console.log("submit!");
      },
      test2(cityId) {
        this.cityId = cityId;
      },
      test(val) {
        // 为了获取到province的id
        let provinceList = this.provinceList;
        for (let i = 0; i < provinceList.length; i++) {
          if (provinceList[i].code == val) {
            this.form.provinceId = provinceList[i].code;
          }
        }
        this.ProvinceCode = val;
        let cityList = this.cityList;
        if (this.selectCityList.length != 0) {
          this.selectCityList = [];
        }
        for (let i = 0; i < cityList.length; i++) {
          if (cityList[i].provinceCode == this.ProvinceCode) {
            this.selectCityList.push(cityList[i]);
          }
        }
      },
      getCityList() {
        listCity()
          .then((res) => {
            this.cityList = res.data;
            console.log(res.data);
          })
          .catch((reason) => {
          });
      },
      getProvinceList() {
        listProvinces().then((res) => {
          this.provinceList = res.data;
        });
      },
      handleAvatarSuccess(res, file) {
        this.form.skuImg = res.data;
        console.log(res.data);
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      handleAvatarSuccess02(res, file) {
        this.img = res.data;

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
    },
    created() {
      this.getProvinceList();
      this.getCityList();
      this.getCategoryList();

      this.getProduct();
      this.getParams()
    },
  };
</script>

<style>
  .buzhou {
    padding: 50px 420px;
    border: 2px solid #dee1e6;
    /* width: 60%; */
    /* margin: 0 auto; */
  }
</style>
